<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style>
			.top-main {
				padding: 5px 15px 10px;
				position: relative;
				height: 17em;
				background-image: url(images/BACK.png);
				background-size: 100% 100%;
			}
			
			.tittle {
				margin: 0 auto;
				width: 80%;
				text-align: center;
				color: #fff;
				line-height: 2em;
			}
			
			.setting {
				float: right;
				color: #fff;
				line-height: 2em;
			}
			
			.ring {
				margin: 10px auto;
				width: 170px;
				height: 170px;
				background: url(images/ring.png);
				background-size: 100% 100%;
			}
			
			.device-sum {
				width: 8em;
				margin: 15px auto;
				padding: 5px 3px;
				color: #fff;
				font-size: small;
				text-align: center;
				border-radius: 2em;
				background: rgba(225, 225, 225, .3);
			}
			
			.status-box {
				width: 100%;
				background: #fff;
			}
			
			.unline {
				color: #9D9D9D;
			}
			
			.online {
				color: #4A9CFB;
			}
			
			.err {
				color: #E83E36;
			}
			
			.inner-box {
				padding-top: 7px;
				width: 32%;
				height: 3em;
				display: inline-table;
				text-align: center;
				font-weight: 400;
			}
			
			.inner-box .num {
				font-size: 1.5em;
			}
			
			.inner-box .text {
				font-size: .7em;
			}
			
			.mui-table-view {
				background: #fff !important;
			}
			
			.mui-table-view .mui-table-view-cell {
				border: 0 !important;
			}
			
			.mui-table-view .iconfont {
				display: block;
				color: #276CAA;
				width: 50px;
				height: 50px;
				margin: 0 auto;
				padding-top: 12px;
				font-size: 25px !important;
				border: 1px solid #276CAA;
				border-radius: 40px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="top-main">
				<div class="setting">
					<a class="mui-icon mui-icon-gear" id='setting'></a>
				</div>
				<div class="tittle">
					物联检测终端
				</div>
				<div class="ring">
					<canvas id="myCanvas" width="170" height="170"></canvas>
				</div>
				<div class="device-sum">
					设备总数 : <span id="dev_sum">-</span>
				</div>
			</div>
			<div class="content">
				<div class="status-box">
					<div class="inner-box unline">
						<div class="num"><span id="notonline">--</span></div>
						<div class="text">未启用</div>
					</div>
					<div class="inner-box online">
						<div class="num"><span id="dev_ok">--</span></div>
						<div class="text">正常</div>
					</div>
					<div class="inner-box err">
						<div class="num"><span id="dev_fail">--</span></div>
						<div class="text">异常</div>
					</div>
				</div>
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4 ">
						<a onclick="openCtiyPage()">
							<span class="mui-icon iconfont icon-jiankong"></span>
							<div class="mui-media-body">设备监控</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon iconfont icon-guzhangluduan"></span>
							<div class="mui-media-body">设备故障</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon iconfont icon-dangan"></span>
							<div class="mui-media-body">设备档案</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon iconfont icon-ditu"></span>
							<div class="mui-media-body">GIS地图</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon iconfont icon-baobiao"></span>
							<div class="mui-media-body">报&nbsp;&nbsp;表</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
						<a href="#">
							<span class="mui-icon iconfont icon-shebeicaozuo"></span>
							<div class="mui-media-body">操&nbsp;作&nbsp;器</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mychat.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js"></script>
		<script>
		
			//设置动画 para1：在线数 	 para1：	设备总数
//			drawCicle(7, 32);

				function openCtiyPage() {
						mui.openWindow({
							url: 'html/city.html',
							id: 'city',
							waiting: {
								autoShow: false
							}
						});
					}
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
				var settings = app.getSettings();
				
				
//				var account = doc.getElementById('account');
				//
				window.addEventListener('show', function() {
					var state = app.getState();
//					account.innerText = state.username;
					var a,b,c,d,a1,a2;
					$.ajax({
						type:"get",
						url:"http://121.196.221.74/devices/count",
						async:true,
						headers:{'AUTHORIZATION':'token '+state.token},
						dataType:'json',
						success:function(data){
							if(data){
								doc.getElementById('dev_sum').innerText = data.result.num;
							}
						}
					});
					
					$.ajax({
						type:"get",
						url:"http://121.196.221.74/stat/online",
						async:true,
						headers:{'AUTHORIZATION':'token '+state.token},
						dataType:'json',
						success:function(data){
							if(data){								
								doc.getElementById('notonline').innerText = data[1];
								 a = data[0];
								 b = data[0]+data[1];
								 drawCicle(a, b);
							}
						}
					});
					
					$.ajax({
							type:"get",
							url:"http://121.196.221.74/stat/gzzb",
							async:true,
							headers:{'AUTHORIZATION':'token '+state.token},
							dataType:'json',
							success:function(data){
								if(data){
									doc.getElementById('dev_fail').innerText = data[0];
									doc.getElementById('dev_ok').innerText = data[1];	
								}
							}
						});
				
					
				}, false);				
					
				
				$.plusReady(function() {
					var settingPage = $.preload({
						"id": 'setting',
						"url": 'setting.html'
					});
					//设置
					var settingButton = doc.getElementById('setting');
					//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
					settingButton.addEventListener('tap', function(event) {
						$.openWindow({
							id: 'setting',
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					});
					
				
					
//					var cityPage = $.preload({
//						"id": 'city',
//						"url": 'html/city.html'
//					});
					
//					var sbjkLi = doc.getElementById('sbjk');
			
//					sbjkLi.addEventListener('tap', function(event) {
//						$.openWindow({
//							id: 'city',
//							show: {
//								aniShow: 'pop-in'
//							},
//							styles: {
//								popGesture: 'hide'
//							},
//							waiting: {
//								autoShow: true
//							}
//						});
//					});					
					
					
					//--
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}(mui, document));
		</script>
	</body>

</html>